<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root">
    <div>
        <h1>学校信息</h1>
        <h2>学校名称:{{school.name}}</h2>
        <h2 >校长:{{}}</h2>
        <h2>学校地址:{{school.address}}</h2>
        <hr>
        <h1>学生信息</h1>
        <button @click="addSex">添加一个性别属性，默认为男</button>
        <h2>学生姓名:{{student.name}}</h2>
        <h2 v-if="student.sex">学生性别:{{student.sex}}</h2>
        <h2>学生年龄.真实:{{student.age.rAge}},对外:{{student.age.sAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}-{{f.age}}
            </li>
        </ul>
    </div>
</div>
<script src="../js/vue.js"></script>
<script>
    Vue.config.productionTip = false//阻止vue启动时产生提示
    new Vue({
        el: "#root",
        data: {//数据
            school:{
                name: '北大',
                address:'北京',
            },
            student:{
                name:'tom',
               /* sex:'男',*/
                age:{
                    rAge:40,
                    sAge:29,
                },
                habit:['抽烟','喝酒','烫头'],
                friends:[
                    {name:'jerry',age: 35},
                    {name:'tony',age: 36}
                ]
            }
        },
        methods: {//方法
            addSex(){
                /*Vue.set(this.student,'sex','男')*/
                this.$set(this.student,'sex','男')
            },
            addLeader(){
                Vue.set(this,'leader','张三')
            },
            addFriend(){
                this.student.unshift({})
            }
        },
        computed: {//计算

        },
        watch: {//监视

        }
    })
</script>

</body>
</html>